<template>
  <el-dialog width='80%' @open='open' style='margin-top: 2vh' v-model='dialogFormVisible' title='关联设备列表'>
    <avue-crud
        v-model='form'
        ref='crud'
        :page='page'
        :data='tableData'
        :table-loading='tableLoading'
        :option='tableOption'
        :before-open='handleOpenBefore'
        @on-load='getList'
        @search-change='searchChange'
        @refresh-change='refreshChange'
        @size-change='sizeChange'
        @current-change='currentChange'
        @selection-change='selectionChange'
    >
    </avue-crud>
    <div class='btn-box'>
      <el-button @click='handelClick' type='primary'>关联设备</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {fetchList, putObj} from '/@/api/check/omichecklist'

export default {
  name: 'equipment',
  data() {
    return {
      flag: false,
      dialogFormVisible: true,
      tableData: [],
      form: {},
      tableLoading: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableOption: {
        border: true,
        stripe: true,
        tip: false,
        menu: false,
        addBtn: false,
        align: 'center',
        index: true,
        indexLabel: '序号',
        searchMenuSpan: 5,
        searchLabelWidth: 'auto',
        searchMenuPosition: 'left',
        searchEnter:true,
        indexWidth: '60',
        selection: true,
        reserveSelection: true,
        rowKey: 'deviceNo',
        columnBtn: false,
        column: [
          {
            label: '资产型号',
            search: true,
            prop: 'devType',
            hide: true,
            overHidden: true
          },
          {
            label: '资产名称',
            search: true,
            prop: 'deviceName',
            overHidden: true
          },
          {
            label: '使用状态',
            search: true,
            // '使用状态：0未使用，1已上线，2已下线',
            formatter: (val) => {
              return val.employStatus === 0
                  ? '未使用'
                  : val.employStatus === 1
                      ? '已上线'
                      : '已下线'
            },
            prop: 'employStatus',
            searchType: 'select',
            dicData: [
              {
                label: '未使用',
                value: 0
              },
              {
                label: '已上线',
                value: 1
              },
              {
                label: '已下线',
                value: 2
              }
            ],
            overHidden: true
          },
          {
            label: '设备维护人',
            search: true,
            prop: 'operationBy',
            overHidden: true
          },
          {
            label: '关联设备状态',
            search: false,
            prop: 'status',
            searchType: 'select',
            dicData: [{
              label: '已关联',
              value: 0
            }, {
              label: '全部',
              value: 1
            }],
            value: 0,
            hide: true
          }
        ]
      }
    }
  },
  created() {
  },
  props: ['id', 'DeviceData'],
  watch: {
    dialogFormVisible: {
      handler() {
        this.$emit('closeDialog')
      }
    },
  },
  computed: {},
  methods: {
    // 选中的设备关联操作
    handelClick() {
      let ids = []
      this.selectList.forEach((data) => {
        ids.push(`${data.deviceName}:${data.deviceNo}`)
      })
      putObj({associatedDevice: ids.join(';'), id: this.id, associatedDeviceFlag: JSON.stringify(this.selectList)})
          .then((data) => {
            this.$message.success('添加成功')
            this.$emit('addEquipment')
            this.$emit('closeDialog')
          })
          .catch(() => {
            this.$emit('closeDialog')
          })
    },
    // 全选按钮
    selectionChange(list) {
      this.selectList = list
      console.log('this.selectList', this.selectList)
    },
    // 获取表格数据
    getList(page, params) {
      this.tableLoading = true
      fetchList(
          Object.assign(
              {
                current: page.currentPage,
                size: page.pageSize
              },
              params,
              this.searchForm
          )
      )
          .then((response) => {
            this.tableData = response.data.records
            this.page.total = response.data.total
            this.tableLoading = false
            if (this.DeviceData.length === 0) return
            if (!this.flag) {
              this.$nextTick(() => {
                this.$refs.crud.toggleSelection()
                this.$refs.crud.toggleSelection(JSON.parse(this.DeviceData))
                this.flag = true
              })
            }
          })
          .catch(() => {
            this.tableLoading = false
          })
    },
    // 分页大小
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    // 改变页数
    currentChange(current) {
      this.page.currentPage = current
    },
    // 点击搜索
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      if (this.tableData.length === 0) {
        this.flag = false
      }
      done()
    },
    // 刷新表格
    refreshChange() {
      this.getList(this.page)
    },
    // 打开前回调
    handleOpenBefore(show, type) {
      show()
    }
  }
}
</script>

<style lang='scss' scoped>
.btn-box {
  display: flex;
  justify-content: flex-end;
}
</style>